import React from 'react'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
import home from '../../assets/foot/1-1.png'
import homeActive from '../../assets/foot/shouye-btn.png'
import my from '../../assets/foot/4.png'
import myActive from '../../assets/foot/4-1.png'
import { Link } from 'react-router-dom'
export default () => {
  const FootItem = [
    {
      name: '首页',
      path: '/',
      icon: home,
      iconActive: homeActive,
    },
    {
      name: '我的',
      path: '/home',
      icon: my,
      iconActive: myActive,
    },
  ]
  return (
    <div className="app-footer">
      <Tabbar>
        {FootItem.map((item) => (
          <Tabbar.Item
            key={item.path}
            icon={(ac) => <img src={!ac ? item.icon : item.iconActive} />}
          >
            <Link to={item.path}>{item.name}</Link>
          </Tabbar.Item>
        ))}
      </Tabbar>
    </div>
  )
}
